<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>常见问题-子页面</title>
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			body,html,.mui-content{width:100%!important;}
			/*问题列表*/
			.question_cont{width:7.25rem;overflow:auto;margin:0 .12rem 0 .12rem;}
			.question_cont .question_list{width:100%;float:left;margin-bottom:.15rem;background:#fff;}
			.question_cont .question_list .question_top{border:1px solid #d9d9d9;border-bottom:none;padding-top:.35rem;overflow:hidden;}
			.question_titles{width:4.8rem;float:left;height:.35rem;background:url(../../images/jindu/question_line.png) no-repeat; background-size:100% auto;position:relative;margin-left:1.1rem;}		
			.question_titles>span{width:1rem;height:.35rem;position:absolute;line-height:.35rem;left:50%;margin-left:-.45rem;color:#999;font-size:.3rem;top:0;}		
			.question_center{background:url(../../images/jindu/question_bian.png) no-repeat; background-size:100% auto;background-position:left bottom;overflow:hidden;height:.33rem;width:100%;}
			.question_titles>span>img{width:.3rem;float:left;margin-right:.07rem;margin-top:.03rem;}
			.question_top .share{float:right;width:1rem;background:url(../../images/jindu/share.png) no-repeat; background-size:.26rem auto;background-position:left .04rem;padding-left:.36rem;color:#a0a0a0;line-height:.4rem;margin-right:.2rem;
			margin-top:.08rem;font-size:.26rem;}
			.question_tw{font-size:.28rem;width:100%;padding:.37rem .2rem;width:100%;float:left;margin:0;color:#333;}
			.question_bottom{background:#fafafa;border:1px solid #d9d9d9;border-top:none;overflow:hidden;padding-top:.1rem;}
		</style>
	</head>
	<body>
		<div class="mui-content mui-scroll-wrapper" id="scroll">
			<div class="question_cont mui-scroll" >
				<ul class="mui-table-view">
				<template v-for="sxQuestion in sxQuestionList"  v-if="hot_show">
					<div class="question_list">
						<div class="question_top">
							<h5 class="question_titles"><span><img src="../../images/jindu/tw2x.png" style="margin-top:0;">问题</span></h5>
							<p class="question_tw" v-html="sxQuestion.ask"></p>
						</div>
						<div class="question_center"></div>
						<div class="question_bottom">
							<h5 class="question_titles"><span><img src="../../images/jindu/jd2x.png">解答</span></h5>
							<p class="question_tw" style="padding-top:.2rem" v-html="sxQuestion.answer"></p>
						</div>
					</div>
				</template>
				</ul>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/app.js"></script>
		<script src="../../js/mui.pullToRefresh.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script>
			mui.init({
				pullRefresh: {
					container: "#scroll", //上拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					  up: {//上拉加载
				            contentrefresh: '正在加载...',
				            auto:true,//可选,默认false.自动上拉加载一次
				            contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
				            callback: pullupRefresh
				       }
				}
			});
			mui.plusReady(function () {
				closeWaitingAndShowView();
			})
			var sxQuestion_vue = new Vue({
				el: '#scroll',
				data: {
					hot_show:false,
					sxQuestionList:[]
				}					  
			});
			var pageStart = 0;//当前页码
			var pageSize = 20;//每页显示的条数
			var maxPageNumber = 1;//最大页数
			var oldKeyWord='';
			var siteId;
			/**
			 * 上拉加载页面数据
			 */
			function pullupRefresh() {
		        pageStart++;//翻下一页
		        if(pageStart<=maxPageNumber){
		        		loadMore(pageStart,pageSize,'',true);//具体取数据的方法
		        }else{
		        		mui('#scroll').pullRefresh().endPullupToRefresh(true);
		        }
			}
			
		   function loadMore(pageStart,pageSize,keyWord,moreFlag) {
		   		if(moreFlag){
		   			keyWord=oldKeyWord
		   		}
		   		var param = {};
				param.keyWord = keyWord;
				param.pageNumber = pageStart;
				param.pageSize = pageSize;
				param.siteId = getCurrentSiteId();
				var url = 'appHttpServiceQuestion/serviceQuestionList.do';
			    utils.ajax(url, function(data) {
					data = JSON.parse(data);
					if(data.state == 0 && data.total > 0) {
						maxPageNumber = data.maxPageNumber;
						var sxQuestions = JSON.parse(data.result);
						if(sxQuestions != null && sxQuestions.length > 0){
							sxQuestion_vue.hot_show = true;
							if(sxQuestion_vue.sxQuestionList&&sxQuestion_vue.sxQuestionList.length>0){
								if(oldKeyWord==keyWord){
									if(moreFlag){
										sxQuestion_vue.sxQuestionList = sxQuestion_vue.sxQuestionList.concat(sxQuestions);
									}else{
										sxQuestion_vue.sxQuestionList = sxQuestions;
									}
								}else{
									oldKeyWord=keyWord;
									sxQuestion_vue.sxQuestionList = sxQuestions;
								}
							}else{
								if(oldKeyWord!=keyWord){
									oldKeyWord=keyWord;
								}
								sxQuestion_vue.sxQuestionList = sxQuestions;
							}
							mui('#scroll').pullRefresh().refresh(true);
							mui('#scroll').pullRefresh().endPullupToRefresh(false);
						}else{
							mui('#scroll').pullRefresh().endPullupToRefresh(true);
						}
					}else if(data.state == 0 && data.total == 0) {
						mui('#scroll').pullRefresh().endPullupToRefresh(true);
					}
				}, jsonToParams(param,true));
				
			};	
			
			
			document.addEventListener('searchEvent', function(e) {
				oldKeyWord=e.detail.searchKey;
				pageStart=1;
				loadMore(pageStart,pageSize,oldKeyWord);
			});
		</script>
	</body>
</html>
